<template>
  <div class="app-container" style="">
    <el-row>
      <div style="height:40px">
        <el-col :span="24">
          <el-tabs style="height:30px;margin-left:0px;width:100%" value="org" @tab-click="getDataForAll">
            <el-tab-pane label="公司数据" name="org"></el-tab-pane>
            <el-tab-pane label="我负责的" name="inChargeMe"></el-tab-pane>
            <el-tab-pane label="我参与的" name="participate"></el-tab-pane>
            <el-tab-pane name="myNeedToDeal">
              <span slot="label">
                <el-badge :value="totalCount" :max="99" class="item">
                  我的待办
                </el-badge>
              </span>
              <myApprovalList ref="myApprovalListForIndex" v-if="isMyApprovalList"></myApprovalList>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <!-- <el-col :span="6">
          <el-row type="flex" align="middle" justify="space-between">
            <el-button size="small" type="primary">工时确认</el-button>
            <el-button size="small" type="primary">公式填报</el-button>
            <el-button size="small" type="primary">新建项目</el-button>
          </el-row>

        </el-col> -->
      </div>
    </el-row>
    <el-row v-show="!isMyApprovalList">
      <!-- 项目信息概览 -->
      <el-col :span="18">
        <div style="border:1px solid #d3d3d3;background:white;height: 131px;">
          <el-row>
            <div class="grid-content bg-purple" style="font-size:14px;">&emsp;项目信息概览</div>
          </el-row>
          <el-row>
            <el-col :span="24">
              <exceptionOverview ref="exception"></exceptionOverview>
            </el-col>
          </el-row>
        </div>

        <!-- 工时确认 -->
        <el-row style="">
          <!-- 工时确认 -->
          <el-col :span="13">
            <taskSoonOverdue ref="taskSoonOverdue"></taskSoonOverdue>
          </el-col>
          <!-- 最新创建和最近完成 -->
          <el-col :span="11">
            <recentlyCreateAndComplete ref="recentlyCreateAndComplete" v-if="a"></recentlyCreateAndComplete>
            <recentlyCreateAndCompleteinChargeMe ref="recentlyCreateAndCompleteinChargeMe" v-if="b"></recentlyCreateAndCompleteinChargeMe>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <projectTypeStatistics ref="typeStatistics"></projectTypeStatistics>
        </el-row>
        <el-row>
          <projectStatus ref="statusStatistics"></projectStatus>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import exceptionOverview from './components/exceptionOverview'
import taskSoonOverdue from './components/taskSoonOverdue'
import recentlyCreateAndComplete from './components/recentlyCreateAndComplete'
import recentlyCreateAndCompleteinChargeMe from './components/recentlyCreateAndCompleteinChargeMe'
import projectTypeStatistics from './components/projectTypeStatistics'
import projectStatus from './components/projectStatus'
import { getProjectpInfoSurvey, getProjectOverallInfo } from '../../../api/projectIndexInfo'
import { getAction, deleteAction, putAction } from '@tapui/utils/http'
import myApprovalList from '../approval/approvalList'
export default {
  name: 'yunweiIndex',
  components: {
    exceptionOverview,
    taskSoonOverdue,
    recentlyCreateAndComplete,
    recentlyCreateAndCompleteinChargeMe,
    projectTypeStatistics,
    projectStatus,
    myApprovalList
  },
  // mixins: [mixin_list],
  data() {
    return {
      dataPermissionFlag: 'org', // 公司数据、我参与的、我负责的标志
      yearForManHour: '',
      isMyApprovalList: false,
      a: true,
      b: false,
      myApprovalListNum: 0,
      sourcetypeList: []
    }
  },

  methods: {
    // tab切换重新加载数据
    getDataForAll(param) {
      if (param.name !== 'myNeedToDeal') {
        this.a = true
        this.b = false
        if (param.name === 'inChargeMe') {
          this.a = false
          this.b = true
        }
        this.isMyApprovalList = false
        this.getProjectSurveyInfo(param.name)
        this.getProjectOverallInfo(param.name)

        this.$refs.recentlyCreateAndComplete.dataPermissionFlagForRecentlyProject = param.name
        this.$refs.recentlyCreateAndComplete.loadData()
        this.getRecentlyCreatProjet(param.name)

        this.$refs.taskSoonOverdue.dataPermissionFlagForRecentlyProject = param.name
        this.$refs.taskSoonOverdue.loadData()
        this.loadTaskSoonOverdue(param.name)
      } else {
        this.isMyApprovalList = true
      }
    },
    // 获取项目首页项目概况
    getProjectSurveyInfo(paramData) {
      // this.dataPermissionFlag = data
      getProjectpInfoSurvey({ dataPermissionFlag: paramData }).then(res => {
        // 渲染项目概况
        this.$refs.exception.sruveyList = res.result.exceptionList
        this.$refs.exception.taskLogInfo = res.result.taskLogInfo
        // this.sruveyList = res.result
        // this.projectType = res.result.catagoryData
      })
    },
    // 获取项目状态和项目类型饼图数据
    getProjectOverallInfo(paramData) {
      getProjectOverallInfo({ dataPermissionFlag: paramData }).then(res => {
        if (res.statusCode === 200) {
          // 渲染项目类型饼图
          this.$refs.typeStatistics.seriesDataType = res.result.catagoryData
          this.$refs.typeStatistics.setLineOptionForType()
          // 渲染项目状态饼图
          this.$refs.statusStatistics.statusSeriesData = res.result.projectStatData
          this.$refs.statusStatistics.setLineOptionForStatus()
        }
      })
    },
    // 待确认工时加载
    loadTaskSoonOverdue(paramData) {
      this.$refs.taskSoonOverdue.dataPermissionFlagForManHour = paramData
      this.$refs.taskSoonOverdue.loadData()
    },
    // 获取最近新建项目
    getRecentlyCreatProjet(paramData) {
      this.$refs.recentlyCreateAndComplete.dataPermissionFlagForManHour = paramData
      this.$refs.recentlyCreateAndComplete.loadData()
      if (this.$refs.myApprovalListForIndex) {
        this.myApprovalListNum = this.$refs.myApprovalListForIndex.sourcetypeList
      }
    }
  },
  created() { },
  mounted() {
    this.getProjectSurveyInfo(this.dataPermissionFlag)
    this.getProjectOverallInfo(this.dataPermissionFlag)
    this.loadTaskSoonOverdue(this.dataPermissionFlag)
    this.getRecentlyCreatProjet()
    getAction('/cbo/approvalNodeIns/querySouceTypeCount').then(res => {
      this.sourcetypeList = res.result
    })
  },
  computed: {
    totalCount() {
      let total = 0
      this.sourcetypeList.forEach(m => {
        total += m.count
      })
      return total
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 5px;
  margin: 0px;
  background-color: white;
}
.app-container >>> .el-pagination__total {
  margin: 0px;
}
.app-container >>> .el-pagination__jump {
  margin: 0px;
}
.app-container >>> .el-pagination__sizes {
  margin: 0px;
}
.app-container >>> .el-pager li {
  margin: 0px;
}
.app-container >>> .el-pagination .el-select .el-input {
  width: 85px;
}
.app-container >>> .el-badge__content.is-fixed {
  top: 10px;
  right: 6px;
}
.app-container >>> .el-tabs__header {
  margin: 0 0 5px;
}
.app-container >>> .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  min-width: 20px;
}
.app-container >>> .el-pagination.is-background .btn-prev {
  min-width: 20px;
}
.grid-content {
  line-height: 35px;
  border-radius: 4px;
  height: 35px;
}
.bg-purple {
  background: #f7f7f7;
  font-size: 16px;
  border-bottom: 1px solid #d3d3d3;
  /* margin-top: 1rem; */
}
.el-row {
  margin-bottom: 5px;
  background-color: white;
}
.el-button {
  margin-right: 20px;
}
.el-button {
  margin-top: 3px;
}
.is-fixed {
  top: 10px;
}
</style>
